<template>
	<div class="seasonal">
		<div class="seasonal_top">
			<h1>当季目的地</h1>
			<p>
				<span>你朋友圈的旅行内容,我们包了</span>
			</p>
			
			<em>更多<i class="iconfont">&#xe62d;</i></em>
		</div>
		<div class="seasonal_bottom">
			<ul >
				<li v-for="item in tabs" :key="item.id" :class="{ 'default' : iscur===item.id }" @click="iscur = item.id">
					{{item.name}}
				</li>
			</ul>
			
				<Seasonal_one v-if="iscur === 1"></Seasonal_one>
				<Seasonal_two v-if="iscur === 2"></Seasonal_two>
			
		</div>
	</div>
</template>

<script>
	import Seasonal_one from './Seasonal_one.vue'
	import Seasonal_two from './Seasonal_two.vue'
	export default{
		name:'Seasonal',
		data(){
			return{
				tabs : [
					{id:1,name:'国内'},
					{id:2,name:'出境'},
				],
				iscur : 1//默认选中第一个标题以及第一个组件
			}
		},
		components:{
			Seasonal_one,
			Seasonal_two
			
		}
	}
</script>

<style scoped>
	.seasonal{
		margin-top: 2rem;
		width: 100%;
		height: 27rem;
		background-color: white;
	}
	.seasonal .seasonal_top{
		width: 95%;
		display: flex;
		align-items: center;
		line-height: 3rem;
		margin:  0 auto;
		height: 3rem;
		
	}
	.seasonal .seasonal_top h1{
		width: 31%;
		text-indent: 1rem;
		font-size: 1.2rem;
		font-weight: bolder;
	}
	.seasonal .seasonal_top p{
		width: 47%;
		text-align: center;
	}
	.seasonal .seasonal_top span{
		border-radius: 1rem;
		background-color: #fff3ea;
		color: #ff9e51;
		
	}
	.seasonal .seasonal_top em{
		width: 20%;
		text-align: right;
	}
	.seasonal .seasonal_bottom{
		width: 98%;
		overflow: hidden;
		margin: 0 auto;
	}
	.seasonal .seasonal_bottom ul{
		margin-left: 1rem;
		width: 98%;
		height: 2rem;
		line-height: 2rem;
		
		
	}
	.seasonal .seasonal_bottom li{
		float: left;
		width: 25%;
		text-align: center;
	}
	
	.seasonal .seasonal_bottom ul .default{
		background-color: #ffa722;
		border-radius: 0.8rem;
		border: none;
		color: white;
	}
	
</style>
